<template>
    <el-container>
        <div
            style="width: 66%;height: 50px; margin-top: 5px; margin-bottom: 5px;display: flex;flex-wrap: nowrap;justify-content: space-evenly;align-items: center;">
            <div style="display: flex;align-items: center;">
                <span>统计年月:</span>
                <el-date-picker @change="render" value-format="YYYY-MM" v-model="search.yearMonth" type="month"
                    placeholder="选择年月" :clearable="false" style="margin-left: 10px;width: 150px;" />
            </div>

            <div style="display: flex;align-items: center">
                <span>统计应用:</span>
                <el-select @change="getAreasByApp" v-model="search.appName" placeholder="请选择统计应用"
                    style="width: 150px;margin-left: 10px; " filterable>
                    <el-option label="观星台" value="观星台"></el-option>
                    <el-option label="数据看板" value="数据看板"></el-option>
                    <el-option label="流向查" value="流向查"></el-option>
                </el-select>
            </div>

            <div style="display: flex;align-items: center">
                <span>统计片区:</span>
                <el-select @change="render" v-model="search.areas" multiple placeholder="请选择片区"
                    style="width: 220px;margin-left: 10px; " filterable clearable collapse-tags>
                    <el-option v-for="(item, index) in areasData" :key="index" :label="item" :value="item"></el-option>
                </el-select>
            </div>
        </div>
        <el-header style="display: none"></el-header>

        <el-main class="nopadding">
            <div class="accessBox">
                <div class="left">
                    <p class="p1">{{ generalViewSub.viewTimes }}</p>
                    <p>访问次数</p>
                </div>
                <div class="right">
                    <p class="p2">{{ generalViewSub.viewNum }}</p>
                    <p>访问人数</p>
                </div>
            </div>

            <div class="charts">

                <template v-if="echartsProportion.series[1].data.length > 0 || echartsProportion.series[0].data.length > 0">
                    <div class="title">日访问量</div>
                    <scEcharts width='100%' height="100%" :option="echartsProportion"></scEcharts>
                    <div class="title">日访问人数</div>
                </template>
                <el-empty v-else style="width: 100%;" description="暂无数据" :image-size="100"></el-empty>


            </div>

            <labelName margin="30px 10px 20px 10px" :title="'应用模块访问统计分析'"></labelName>
            <el-table :show-summary="true" :expand-row-keys="expandedRows" row-key="moduleType" @expand-change="getItemData"
                v-loading="loading" :data="appModuleView" :border="true" :stripe="false" cell-class-name="cell-row"
                header-cell-class-name="header-row">
                <el-table-column type="expand" width='60'>
                    <template #default="scope">
                        <el-table :row-style="{ background: '#f6f8f9' }" v-loading="itemLoading" :show-header="false"
                            :data="appSubModuleView" :border="true" :stripe="false" cell-class-name="cell-row"
                            header-cell-class-name="header-row">
                            <el-table-column width='40'></el-table-column>
                            <el-table-column prop="moduleType" label="应用模块" align="center">
                            </el-table-column>
                            <el-table-column prop="subModuleType" label="应用子模块" align="center">
                            </el-table-column>
                            <el-table-column prop="monthViewNum" label="本月访问人数" align="center">
                            </el-table-column>
                            <el-table-column label="本月使用率" align="center">
                                <template #default="scope">
                                    {{ changeData(scope.row.monthViewNum / scope.row.otcCount) }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="monthViewTimes" label="本月访问次数" align="center">
                            </el-table-column>
                            <el-table-column label="本月访问次数环比" align="center">
                                <template #default="scope">
                                    {{ scope.row.lastMonthViewTimes ? changeData((scope.row.monthViewTimes -
                    scope.row.lastMonthViewTimes) /
                    scope.row.lastMonthViewTimes) : '0%' }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="yearViewNum" label="本年访问人数" align="center">
                            </el-table-column>
                            <el-table-column label="本年使用率" align="center">
                                <template #default="scope">
                                    {{ changeData(scope.row.yearViewNum / scope.row.otcCount) }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="yearViewTimes" label="本年访问次数" align="center">
                            </el-table-column>
                            <template #empty>
                                <el-empty description="暂无数据" :image-size="100"></el-empty>
                            </template>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column prop="moduleType" label="应用模块" align="center">
                </el-table-column>
                <el-table-column prop="subModuleType" label="应用子模块" align="center">
                </el-table-column>
                <el-table-column prop="monthViewNum" label="本月访问人数" align="center">
                </el-table-column>
                <el-table-column label="本月使用率" align="center">
                    <template #default="scope">
                        {{ changeData(scope.row.monthViewNum / scope.row.otcCount) }}
                    </template>
                </el-table-column>
                <el-table-column prop="monthViewTimes" label="本月访问次数" align="center">
                </el-table-column>
                <el-table-column label="本月访问次数环比" align="center">
                    <template #default="scope">
                        {{ scope.row.lastMonthViewTimes ? changeData((scope.row.monthViewTimes -
                    scope.row.lastMonthViewTimes) /
                    scope.row.lastMonthViewTimes) : '0%' }}
                    </template>
                </el-table-column>
                <el-table-column prop="yearViewNum" label="本年访问人数" align="center">
                </el-table-column>
                <el-table-column label="本年使用率" align="center">
                    <template #default="scope">
                        {{ changeData(scope.row.yearViewNum / scope.row.otcCount) }}
                    </template>
                </el-table-column>
                <el-table-column prop="yearViewTimes" label="本年访问次数" align="center">
                </el-table-column>

                <template #empty>
                    <el-empty description="暂无数据" :image-size="100"></el-empty>
                </template>
            </el-table>


            <labelName margin="30px 10px 20px 10px" :title="'片区访问统计分析'"></labelName>
            <el-table :show-summary="true" :preserve-expanded-content="true" v-loading="loading" :data="appAreaView"
                :border="true" :stripe="false" cell-class-name="cell-row" header-cell-class-name="header-row">
                <el-table-column prop="area" label="片区" align="center">
                </el-table-column>
                <el-table-column prop="monthViewNum" label="本月访问人数" align="center">
                </el-table-column>
                <el-table-column label="本月使用率" align="center">
                    <template #default="scope">
                        {{ changeData(scope.row.monthViewNum / scope.row.otcCount) }}
                    </template>
                </el-table-column>
                <el-table-column prop="monthViewTimes" label="本月访问次数" align="center">
                </el-table-column>
                <el-table-column label="本月访问次数环比" align="center">
                    <template #default="scope">
                        {{ scope.row.lastMonthViewTimes ? changeData((scope.row.monthViewTimes -
                    scope.row.lastMonthViewTimes) /
                    scope.row.lastMonthViewTimes) : '0%' }}
                    </template>
                </el-table-column>
                <el-table-column prop="yearViewNum" label="本年访问人数" align="center">
                </el-table-column>
                <el-table-column label="本年使用率" align="center">
                    <template #default="scope">
                        {{ changeData(scope.row.yearViewNum / scope.row.otcCount) }}
                    </template>
                </el-table-column>
                <el-table-column prop="yearViewTimes" label="本年访问次数" align="center">
                </el-table-column>
                <template #append>
                    <div class="table-append">
                        <el-button v-if="datano && activeAreaData1.length > 0" :loading="loading" type="primary"
                            @click="getDatas">点击加载更多</el-button>
                    </div>
                </template>
                <template #empty>
                    <el-empty description="暂无数据" :image-size="100"></el-empty>
                </template>
            </el-table>


        </el-main>
    </el-container>
</template>

<script>
import { ElMessage } from 'element-plus'
import labelName from '../../components/labelname.vue'
import scEcharts from '@/components/scEcharts'

export default {
    name: 'analysis',
    data() {
        return {
            search: {
                appName: '观星台',
                areas: [],
                yearMonth: this.$TOOL.dateFormat(new Date(new Date().getFullYear(), new Date().getMonth()), 'yyyy-MM')
            },
            areasData: [],
            echartsProportion: {
                title: {
                    // text: '近7日访问趋势',
                    top: 10,
                    textStyle: {
                        color: 'black',  // 设置标题文字颜色为红色
                        fontSize: 14,
                        fontWeight: 'normal'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['11.14', '11.15', '11.16', '11.17', '211.18', '11.19', '11.20'],
                    axisLabel: {
                        rotate: 45  // 旋转角度，可以调整为适合的角度
                    }
                },
                yAxis: [
                    {
                        type: 'value',  // 左侧y轴
                        position: 'left', // 默认是 left
                        axisLabel: {
                            formatter: '{value}'
                        },
                        // min: 0,
                        // max: 200,  // 根据你的数据范围设置
                        // interval: 40,
                    },
                    {
                        type: 'value',  // 右侧y轴
                        position: 'right',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        // min: 0,
                        // max: 200,  // 根据你的数据范围设置
                        // interval: 5,
                    }
                ],
                // legend: {
                //     orient: 'horizontal',
                //     width: '100%',
                //     itemWidth: 20,
                //     left: 0,
                //     top: 40,
                //     data: ['日访问量', '日访问人数',]
                // },
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '10%',
                    containLabel: true

                },
                series: [
                    {
                        name: '日访问量',
                        type: 'line',
                        yAxisIndex: 0,  // 使用左侧y轴
                        data: []
                    },
                    {
                        name: '日访问人数',
                        type: 'line',
                        yAxisIndex: 1,  // 使用右侧y轴
                        data: []
                    }
                ]
            },
            generalViewSub: '',
            appModuleView: [],
            appSubModuleView: [],
            itemLoading: false,
            expandedRows: [],
            appAreaView: []
        }

    },
    components: {
        labelName, scEcharts
    },
    watch: {

    },
    computed: {

    },
    mounted() {

        this.getAreasByApp()
        // this.render()
    },
    methods: {
        render() {
            this.$API.log.generalViewSub.post({ data: { ...this.search } }).then((res) => {
                this.generalViewSub = res.data
            })

            this.$API.log.monthView.post({ data: { ...this.search } }).then((res) => {
                // this.monthView = res.data
                this.echartsProportion.yAxis.data = []
                this.echartsProportion.xAxis.data = []
                this.echartsProportion.series[0].data = []
                this.echartsProportion.series[1].data = []
                res.data.forEach((e) => {
                    this.echartsProportion.xAxis.data.push(e.logTime)
                    this.echartsProportion.series[0].data.push(e.viewTimes)
                    this.echartsProportion.series[1].data.push(e.viewNum)
                })
            })

            this.$API.log.appModuleView.post({ data: { ...this.search } }).then((res) => {
                this.appModuleView = res.data
            })

            this.$API.log.appAreaView.post({ data: { ...this.search } }).then((res) => {
                this.appAreaView = res.data
                // this.summation(this.appAreaView,'area')
            })

        },
        getItemData(e, e2) {
            if (this.expandedRows.includes(e.moduleType)) {
                this.expandedRows = [];
            } else {
                // 否则只展开当前行（自动关闭其他行）
                this.expandedRows = [e.moduleType];
            }

            // console.log('触发了行', e, e2);
            if (e2.length == 0) {
                return
            }
            this.appSubModuleView = []
            this.itemLoading = true
            this.$API.log.appSubModuleView.post({ data: { ...this.search, moduleType: e.moduleType } }).then((res) => {
                this.appSubModuleView = res.data
                this.itemLoading = false

            })
        },
        getAreasByApp() {
            this.render()
            this.search.areas = []
            this.$API.log.areasByApp.get({ appName: this.search.appName }).then((res) => {
                this.areasData = res.data
            })
        },
        changeData(num) {
            return Math.round(num * 100) + "%"
        },
        summation(newData, name) {
            // 创建合计行对象
            let totalRow = {
                // custName: "合计"
            };
            totalRow[name] = "合计"
            // 获取所有数值类型的字段名（排除area字段）
            let numericFields = Object.keys(newData[0]).filter(key => key !== "area" && key !==
                "prdPrvPrice" && typeof newData[0][
                key
                ] ===
                "number");
            // 对每个数值字段进行合计
            numericFields.forEach(field => {
                // totalRow[field] = newData.reduce((sum, item) => sum + item[field], 0).toFixed(1);
                if (newData.reduce((sum, item) => sum + item[field], 0)) {
                    totalRow[field] = newData.reduce((sum, item) => sum + item[field], 0).toFixed(1);
                } else {
                    totalRow[field] = newData.reduce((sum, item) => sum + item[field], 0);
                }
            });
            newData.push(totalRow);

            console.log('合计行', newData);
        }

    },


}

</script>

<style scoped lang="scss">
.header-btn-item {
    display: flex;
}

.accessBox {
    width: 95%;
    height: 80px;
    /* background-color: red; */
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    .left,
    .right {
        width: 49.5%;
        height: 80%;
        background-color: #f7f8fa;

        p {
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .p1 {
            color: #1989fa;
            font-weight: bold;
            font-size: 24px;

        }

        .p2 {
            color: #faaa39;
            font-weight: bold;
            font-size: 24px;


        }
    }

}

.charts {
    width: 97%;
    margin: 10px auto;
    height: 280px;
    display: flex;

    /* background-color: red; */
    .title {
        width: 10px;
        height: 100%;
        display: flex;
        align-items: center;

    }
}
</style>
